import { Button, Card, Drawer, Table } from 'antd';
import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import { changeSetColumns, changeSetData } from '../utils/publicMethod';

// 查看编辑全盘概览
export default function ViewOverallOverview(props) {
  const {
    currentYear,
    currentMonth,
    preservationList,
    overallOverviewData,
    currentId,
    latestYearMonth,
    dispatch,
    match,
  } = props;
  const [visible, setVisible] = useState(false);
  const [projectName1, setProjectName1] = useState('');
  const [stagesName1, setStagesName1] = useState('');
  const [columns, setColumns] = useState({
    projectColumns: [],
    stagesColumns: [],
  });
  const [dataSource, setDataSource] = useState({
    projectData: [],
    stagesData: [],
  });

  useEffect(() => {
    if (visible && !_.isEmpty(overallOverviewData)) {
      // 设置表头
      setColumns(changeSetColumns(currentYear, currentMonth));
      // 处理返回的数据
      const NEW_LIST = changeSetData(
        preservationList,
        overallOverviewData,
        currentId,
        currentYear,
        currentMonth,
        latestYearMonth,
        match.params.version,
      );
      setProjectName1(_.head(NEW_LIST.projectData).name);
      setStagesName1(_.head(NEW_LIST.stagesData).name);
      setDataSource(NEW_LIST);
    }
  }, [overallOverviewData]);

  const handleRequest = () => {
    setVisible(true);
    dispatch({
      type: 'ReturnMoneyPlanEdit/getOverallOverviewData',
      payload: {
        params: {
          year: currentYear,
          month: currentMonth,
          versionId: match.params.version,
        },
      },
    });
  };

  return (
    <>
      <Button onClick={handleRequest} className="yellow-button">
        全盘回款概览
      </Button>
      <Drawer title="全盘回款概览" width={700} onClose={() => setVisible(false)} visible={visible}>
        <Card style={{ marginBottom: 10 }}>
          <span style={{ marginBottom: 5 }}>{projectName1}</span>
          <Table
            bordered
            columns={columns.projectColumns}
            size="middle"
            dataSource={dataSource.projectData}
            pagination={false}
            loading={_.isEmpty(dataSource.projectData)}
          />
        </Card>
        <Card>
          <span style={{ marginBottom: 5 }}>{stagesName1}(当前分期)</span>
          <Table
            bordered
            columns={columns.stagesColumns}
            size="middle"
            dataSource={dataSource.stagesData}
            pagination={false}
            loading={_.isEmpty(dataSource.stagesData)}
          />
        </Card>
        <div
          style={{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'center',
          }}
        >
          <Button onClick={() => setVisible(false)}>关闭</Button>
        </div>
      </Drawer>
    </>
  );
}
